import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import {
	ChevronRight16 as FoldingIcon,
	ChevronDown16 as ExpandIcon,
} from '@carbon/icons-react';
import { Link } from 'react-router-dom';
import s from './style.module.css';

const navList = [
	{
		key: 'message',
		label: '消息中心',
		children: [
			{
				label: '告警通知',
				key: 'alert',
				path: '/message/notification-centre',
			},
			{
				label: '漏洞速递',
				key: 'vul',
				path: '/message/vul-centre',
			},
			{
				label: '服务公告',
				key: 'system',
				path: '/message/system-centre',
			},
		],
	},
];
function MessageNav({ className, activeKey }) {
	const [navChildVisible, setNavChildVisible] = React.useState(true);

	const handleTriggerChange = () => {
		setNavChildVisible(!navChildVisible);
	};

	return (
		<div className={cn(className, s.messageNav)}>
			{navList.map(nav => (
				<div className={s.nav} key={nav.key}>
					<div
						className={cn(s.item, s.parentNav)}
						onClick={handleTriggerChange}
					>
						<span>{nav.label}</span>
						{navChildVisible ? <ExpandIcon /> : <FoldingIcon />}
					</div>
					{nav.children &&
						navChildVisible &&
						nav.children.map(item => (
							<Link
								key={item?.key}
								className={cn(s.item, {
									[s.active]: activeKey === item.key,
								})}
								to={item.path}
							>
								{item.label}
							</Link>
						))}
				</div>
			))}
		</div>
	);
}

MessageNav.propTypes = {
	className: PropTypes.string,
	activeKey: PropTypes.string,
};
MessageNav.defaultProps = {
	className: '',
	activeKey: 'alert',
};

export default MessageNav;
